<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件捕获应用：全局监听</title>
		<style type="text/css">
			.son {
				margin-left: 50px;
				text-align: center;
				line-height: 50px;
				background-color: lightblue;
				width: 100px;
				height: 50px;
				border: 1px solid lightcoral;
			}
		</style>
	</head>
	<body>
		<!-- 捕获--全局监听 -->
		<div class="father">
			<p>验证事件捕获对应的DOM事件流:</p>
		    <div class="son">点击son盒子</div>
		</div>
		<div class="cap">
			<h3>用全局监听的方式处理img的dom事件</h3>
			<p>当图片标签加载失败时，触发error事件，可以修改图片源地址。但是我们无法监听到动态产生的img标签，并且给每一个img标签绑定事件处理函数会带来页面性能的损耗。error事件不会冒泡，因此考虑使用事件捕获解决这类error事件。</p>
			<pre>
				document.addEventListener("error", function(e){
					var elem = e.target;
					if(elem.tagName.toLowerCase() === 'img'){
						elem.src = "/img/hint.jpg";
					}
				}, true /*指定事件处理函数在捕获阶段执行*/);
			</pre>
		</div>
		<script>
		    // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
		    // document -> html -> body -> father -> son
		     var son = document.querySelector('.son');
			// 给son注册单击事件，第3个参数为true
		     son.addEventListener('click', function() {
		         alert('son');
		     }, true);
		     var father = document.querySelector('.father');
			// 给father注册单击事件，第3个参数为true
		     father.addEventListener('click', function() {
		         alert('father');
		     }, true);
			// 给document注册单击事件，第3个参数为true
		    document.addEventListener('click', function() {
		        alert('document');
		    }, true)
		</script>
	</body>
</html>
